<template>
  <div class="ordet-refund">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="订单详情"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 订单号 -->
    <van-cell>
      <div class="left"><p>订单号：{{list.o_num}}</p>
      <p>自提时间段：每日8:00 至 21:00</p></div>
      <div class="right">
        <!-- <div><span>14:23</span>
        <span>待支付</span></div> -->
        <van-button>已退款</van-button>
      </div>
    </van-cell>
    <order-item :type="5"></order-item>
    <!-- 合计 -->
     <van-cell class="total">
    <span>合计 :</span>
    <div><b>￥</b>
    <span>85.4</span></div>
    </van-cell>
  </div>
</template>

<script>
import OrderItem from './order-item.vue'
import { getItem } from '@/api/order'
export default {
  name: 'OrderRefund',
  components: {
    OrderItem
  },
  props: {},
  data () {
    return {
      list: {}
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getRefund()
  },
  mounted () {

  },
  methods: {
    async getRefund () {
      try {
        const { data } = await getItem(5)
        console.log(data)
        data.forEach(num => {
          this.list = num
          console.log(this.list)
        })
      } catch (err) {
        this.$toast('获取列表失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
  .ordet-refund {
    margin: 92px 0;
    p {
      margin: 0;
    }
    /deep/.van-nav-bar {
       position: fixed;
      top: 0;
      right: 0;
      left: 0;
      .van-icon-arrow-left {
        font-size: 40px;
        font-weight: 900;
      }
    }
     .van-cell {
    border-top: 1px solid #02b6fd;
    .left {
      float: left;
    }
    .right {
      float: right;
      .van-button {
        height: 45px;
        border-radius: 20px;
      }
    }
    div span {
      margin-left: 20px;
    }
  }
    .payment-btn {
      position: fixed;
      bottom: 0;
      border-radius: 15px 15px 0 0;
    }
      /deep/.total {
      padding-top: 50px;
      .van-cell__value {
        display: flex;
        justify-content: space-between;
        font-size: 40px;
        font-weight: 700;
        span:nth-last-child(1) {
          color: red;
        }
      }
    }
  }
</style>
